<template>
   <a-modal  :width='400'  :bodyStyle='{padding:0}' centered
      :visible="visible" 
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      footer=''
   >
      <div class=' login_box'>
          {{AllData.title}}
          <a-form v-if='currentNav==2' :form="form"   @submit="handleSubmit" class='mt20'> 
              <a-form-item  :label=AllData.userName  :label-col="{ span: 7}" :wrapper-col="{ span: 16 }">
                    <a-input  v-decorator="['loginName',{initialValue:'', rules:[{required:true,message:AllData.vali_username}]}]"  :placeholder=AllData.place_username /> 
              </a-form-item> 
              <a-form-item  :label=AllData.password  :label-col="{ span: 7}" :wrapper-col="{ span: 16 }">
                    <a-input  v-decorator="['loginPassword',{initialValue:'', rules:[{required:true,message:AllData.vali_pass}]}]" :placeholder=AllData.vali_pass type='password'/>
              </a-form-item>
              <a-form-item  :label=AllData.mobile  :label-col="{ span: 7}" :wrapper-col="{ span: 16 }"> 
                    <a-input  v-decorator="['mobile',{initialValue:'', rules:[{required:true,message:AllData.vali_mobile}]}]"  :placeholder=AllData.vali_mobile />
              </a-form-item> 
              <a-form-item  :label=AllData.imgCode :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }"> 
                   <a-input   v-decorator="[ 'captchaCode', { rules: [{ required: true, message: AllData.vali_imgCode },{ whitespace : true ,message:AllData.vali_imgCode}]}]"  :placeholder=AllData.vali_imgCode  style='width: 80px;margin-right: 10px;' @change='Re_verifyCode'/>
                    <img :src='captchaImg' alt='图形验证码'  height="40"  class='cursor mr20'  @click='change_captchaImg()'> 
              </a-form-item> 
              <a-form-item  :label=AllData.mobileCode :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
                  <a-input   v-decorator="['verifyCode',{ rules: [{ required: true, message: AllData.vali_imgCode }]}]" :placeholder=AllData.vali_imgCode  style='width: 80px;margin-right: 10px;' /> 
                  <a-button class='mr20' style='padding: 0 9px;' :disabled='verifyCode_disabled'  @click='get_verifyCode()' ><span v-if='Re_verifyCode_status'>{{reciprocal}}s{{AllData.require}}</span><span v-else>{{AllData.acquireCode}}</span></a-button> 
              </a-form-item>

              <a-form-item  class='pl30 pr30'>
                <a-button type='primary' html-type="submit" class='w-100' >{{AllData.register}}</a-button>

              </a-form-item>
              <span class='fr link' @click='jump_to_login'>{{AllData.login}}</span> 
          </a-form> 
      </div>
      
   </a-modal>
</template>

<script>
import { register,getVerifyCode }  from '@/api/common'
export default {
  name: 'registerForm',
  props:{
    visible:{
      type:Boolean,
      default:false,
    }
     
  },
  data () {
    return { 
        confirmLoading:false,
       
        currentNav:'2',

        captchaImg:'',
        captchaCode:'',//图形验证码 v-model for_require_mobileCode
        random:null,//获取图片验证码 和短信验证码 的同一随机数 
        verifyCode_disabled:true,
        Re_verifyCode_status:false,//验证码获取状态 是否正在获取中
        reciprocal:60,//30s后重新获取
        AllData:{},
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
    
    this.change_captchaImg()
  },
  mounted(){
    this.$nextTick(()=>{
        this.$on('open',function(data){
            this.AllData = data
        })
    })
     
  },
  methods:{
     
    handleCancel(){
      this.form.resetFields()
      this.$emit('CancelRegi')
    },
    changeNav(val){
      this.currentNav=val
      this.form = this.$form.createForm(this);
      this.form.resetFields()
    },
    handleSubmit(e){ 
      e.preventDefault();
      this.form.validateFields((err, values) => {
          if (!err) { 
              console.log('Received values of form: ', values); 
              register(values).then((res)=>{  
                  if(res.data.flag== true){
                    this.$message.success(res.data.msg)
                    this.jump_to_login()
                  } 
              }) 
          }
      });
    },
    jump_to_login(){ 
        this.$store.commit("setloginFormShow",true)
        this.form.resetFields()
        this.$emit('CancelRegi')
    },

    //get_captchaImg
    change_captchaImg(){   
      this.random = Math.random()
      this.captchaImg = process.env.BASE_API+'/verify/get_captcha?requestCode='+this.random
    },
    //get_verifyCode
    get_verifyCode(){
      this.verifyCode_disabled = true

      let mobile = this.form.getFieldValue('mobile')
      let captchaCode = this.form.getFieldValue('captchaCode')
      getVerifyCode(mobile,1,captchaCode,this.random).then((res)=>{
        if(res.data.flag == true){
          this.$message.success(res.data.msg) 
          this.Re_verifyCode_status = true
          let num =  setInterval(()=>{ 
              this.reciprocal-- 
              if(this.reciprocal<=0){
                clearInterval(num)
                this.reciprocal=60
                this.Re_verifyCode_status = false
                this.Re_verifyCode()
              } 
          },1000)
        }
        else{ 
          this.verifyCode_disabled = false
        }
      }).catch((error)=>{
        // console.log(error)
        this.change_captchaImg()
        this.verifyCode_disabled = false
      })
    },
    //手机验证码 （手机号 图形验证码都填写时显示）
    Re_verifyCode(){ 
      let mobile = this.form.getFieldValue('mobile') 
      let captchaCode = this.form.getFieldValue('captchaCode') 
      if(mobile && captchaCode!=''){
          this.verifyCode_disabled = this.Re_verifyCode_status==false? false:true 
      }
      else{
          this.verifyCode_disabled =  true
      } 
    }, 
  },
  computed:{
    // AllData(){
    //     return this.lang.commonComponent.register
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>  
.login_box{padding: 30px 30px 50px;}
/*移动端适配*/
@media(max-width: 420px){   
  .login_box{padding: 30px 20px 50px;}
}
</style>
